<template>
	<view class="page_wrapper page_bg">
		<view class="pagebox">
			<view class="user_header_block">
				<view class="user_right_block">
					<view class="nick_name" @click="handleToSave()">
						Hi {{userInfo.nickname || '欢迎新用户'}}
					</view>
					<span @click="handleToSave()">
						<image style="height: 46rpx;width: 46rpx;" src="../../static/nimg/edit.png" alt="" />
					</span>
				</view>
				<view class="user_left_block">
					<view class="avatar_block rank_block " @click="handleToSave()">
						<!--  -->
						<image class="avatar-wrapper" v-if="userInfo.headImg" :src="changeHeadImg()" alt="" />
						<image class="avatar-wrapper" v-else src="../../static/nimg/headimg.png" alt="" />
					</view>
				</view>

			</view>
			<view class="my_stat_infos_block">
				<view class="user_box_ctx">
					<view class="user_box_item rb">
						<image class="icon" style="height: 94rpx;" src="../../static/nimg/time.png" alt="" />
						<view class="user_box_item_ctx">
							<span class="bwhilt">{{userMathInfo.avgCalcCount}}题/分钟</span>
							<span class="bgreen">口算平均速度</span>
						</view>
					</view>
					<view class="user_box_item">
						<image class="icon" src="../../static/nimg/check.png" alt="" />
						<view class="user_box_item_ctx">
							<span class="bwhilt">{{userMathInfo.rightRate}}%</span>
							<span class="bgreen">正确率</span>
						</view>
					</view>
				</view>
				<image class="user_box_img" src="../../static/nimg/user_box.png" alt="" />
			</view>
			<view class="menus_block">
				<!-- <view class="menu " @tap="toVipDetail()">
					<image class="icon_block" src="../../static/nimg/info.png" mode=""></image>
					<view class="menu_title">会员说明</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<view class="menu" @tap="toUseActiveCode()">
					<image class="icon_block" src="../../static/nimg/vip.png" mode=""></image>
					<view class="menu_title">激活码升级会员</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view> -->
				<view class="menu" @click="mathExamLogs()">
					<image class="icon_block" src="../../static/nimg/list.png" mode=""></image>
					<view class="menu_title">口算练习记录</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<!-- <view class="menu" @click="dataStat()">
					<image class="icon_block" src="../../static/nimg/data.png" mode=""></image>
					<view class="menu_title">数据统计</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view> -->
				<!-- <view class="menu" @click="myMessage()">
					<image class="icon_block" src="../../static/nimg/info.png" mode=""></image>
					<view class="menu_title">我的反馈</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view> -->
				<view class="menu" @click="messageSend()">
					<image class="icon_block" src="../../static/nimg/msg.png" mode=""></image>
					<view class="menu_title">意见反馈</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>

				<!-- <view class="menu" @click="devFuncList()">
					<image class="icon_block" src="../../static/nimg/bedev.png" mode=""></image>
					<view class="menu_title">待开发功能列表</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
				<view class="menu" @click="appUpdateLogs()">
					<image class="icon_block" src="@/static/nimg/update.png" mode=""></image>
					<view class="menu_title">小程序功能更新记录</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view> -->
				<view class="menu" @click="logout()">
					<image class="icon_block" src="@/static/nimg/logout.png" mode=""></image>
					<view class="menu_title">账号注销</view>
					<view class="icon_block">
						<image class="right_icon" src="@/static/nimg/right_arrow.png"></image>
					</view>
				</view>
			</view>
		</view>
		<img class="page_bg_img" src="../../static/nimg/bg.png" alt="" />
		<Tabbar :selectIndex="'my'" />
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	import {
		storageData
	} from '@/utils/storageData.js'
	import Tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components:{
			Tabbar
		},
		data() {
			return {
				userInfo: {
					nickname: '',
					headImg: ''
				},
				userMathInfo: {
					avgCalcCount: 0,
					rightRate: 0
				},
				imgurl: "https://www.hzif.cn/mathematics-attach/",
			}
		},
		onLoad() {
			// this.userInfo = storageData.getLoginUser()
			// this.userInfo.nickname = this.userInfo.nickname ? decodeURIComponent(this.userInfo.nickname) : ""
			console.log(this.userInfo)
			// const appInfo = uni.getAccountInfoSync()
			// console.log(appInfo.miniProgram)
			this.getAvgNum()
		},
		onShow() {
			this.fetchMyUserMathInfo()
		},
		methods: {
			fetchMyUserMathInfo() {
				uni.showLoading()
				request.get('/account/info').then(e=>{
					console.log(e,'info');
					uni.hideLoading()
					if(e.result){
						this.userInfo = e.result
						this.userInfo.nickname = this.userInfo.nickname ? decodeURIComponent(this.userInfo.nickname) : ""
					}else{
						uni.showToast({
							title:e.message,
							icon:'none'
						})
					}
				}).catch(err=>{
					uni.hideLoading()
					uni.showToast({
						title:err,
						icon:'none'
					})
				})
			},
			changeHeadImg(){
				if(this.userInfo.headImg.includes("http")){
					return this.userInfo.headImg
				}else{
					return this.imgurl+this.userInfo.headImg
				}
				
			},
			toVipDetail() {
				uni.navigateTo({
					url: '/pages/articleDetail/articleDetail?articleNo=717466755873365'
				})
			},
			toUseActiveCode() {
				uni.navigateTo({
					url: '/pages/userCenter/useActiveCode/useActiveCode'
				})
			},
			showMyFczCoins() {
				uni.navigateTo({
					url: '/pages/MyFczCoin/MyFczCoin'
				})
			},

			toMathExamWin() {
				uni.switchTab({
					url: '/pages/mathExamWin/mathExamWin'
				})
			},
			messageSend() {
				uni.navigateTo({
					url: '/pages/messageSend/messageSend'
				})
			},
			myMessage() {
				uni.navigateTo({
					url: '/pages/messageSend/messageList'
				})
			},
			mathExamLogs() {
				uni.navigateTo({
					url: '/pages/mathExamLogs/mathExamLogs'
				})
			},

			dataStat() {
				uni.navigateTo({
					url: '/pages/userCenter/dataStat/dataStat'
				})
				// uni.showModal({
				// 	content: '该功能正在开发中，敬请期待',
				// 	showCancel: false
				// })
			},
			handleToSave(){
				uni.navigateTo({
					url:'/pages/userCenter/saveUser/saveUser'
				})
			},

			devFuncList() {
				uni.navigateTo({
					url: '/pages/devFuncList/devFuncList'
				})
			},

			appUpdateLogs() {
				uni.navigateTo({
					url: '/pages/userCenter/appUpdateLogs/appUpdateLogs?articleNo=716722357315256'
				})
			},
			logout(){
				request.postJson("/account/logout").then(res=>{
					if(res.code ===200){
						uni.showToast({
							title:'注销成功',
							icon:'none'
						})
						uni.clearStorage()
						uni.redirectTo({
							url:'/pages/login/login'
						})
					}
				})
			},
			joinWechatGroup() {
				uni.navigateTo({
					url: '/pages/userCenter/appUpdateLogs/appUpdateLogs?articleNo=716773154743463'
				})
			},
			getAvgNum(){
				request.get("/topicRecord/cal").then((res)=>{
					console.log(res);
					if(res.code === 200 && res.result!=null){
						this.userMathInfo.avgCalcCount = res.result.avgNum
						this.userMathInfo.rightRate = res.result.avgAccuracy
					}
				})
			},
		},
		onShareAppMessage(res) {
			const userInfo = storageData.getLoginUser()
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '小奕口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
				imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
			}
		},
		onShareTimeline(res) {
			const userInfo = storageData.getLoginUser()
			return {
				title: '小奕口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
				imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
			}
		},
		// 收藏
		onAddToFavorites(res) {
			return {
				title: '小奕口算：学习好帮手',
				path: '/pages/index/index',
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
				imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
			}
		}
	}
</script>

<style lang="scss">
	

	.pagebox {
		position: relative;
		z-index: 4;
		top: 180rpx;
	}

	.page_wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: scroll;

		.user_header_block {
			padding: 0 40rpx;
			// background-color: white;
			display: flex;
			justify-content: space-between;

			.user_left_block {
				display: flex;
				justify-content: center;
				align-items: center;

				.avatar_block {
					display: flex;
					justify-content: center;
					align-items: center;
					
					.avatar-wrapper {
						height: 140rpx;
						width: 140rpx;
						border: none;
						outline: none;
						border-radius: 50%;
					}

					.avatar-wrapper::after {
						border: none;
					}
				}
			}

			.user_right_block {
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 30rpx;
				.nick_name {
					font-size: 40rpx;
					font-weight: 800;
					display: flex;
					color: #074f1e;
					align-items: center;
					margin-bottom: 10px;
				}
			}
		}

		.my_stat_infos_block {
			margin: 20rpx 0rpx 0 0rpx;
			position: relative;
		}
		.user_box_ctx{
			position: absolute;
			display: flex;
			width: 100%;
			box-sizing: border-box;
			height: 180rpx;
			align-items: center;
			z-index: 4;
			
		}
		.icon{
			width: 88rpx;
			height: 88rpx;
		}
		.user_box_img{
			height: 180rpx;
			width: 100%;
			position: relative;
		}
		.user_box_item{
			// flex: 1;
			display: flex;
			justify-content: flex-start;
			padding: 0 30rpx;
			align-items: center;
			column-gap: 20rpx;
			
		}
		.rb{
			border-right:1rpx solid #156342;
		}
		.user_box_item_ctx{
			display: flex;
			text-align: left;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			row-gap: 20rpx;
			.bwhilt{
				color: white;
				font-size: 30rpx;
				font-weight: bold;
				letter-spacing: 4rpx;
			}
			.bgreen{
				color: #a1e2c7;
				font-size: 24rpx;
				letter-spacing: 4rpx;
			}
		}

		.menus_block {
			display: flex;
			flex-direction: column;
			padding: 10rpx 0rpx;
			row-gap: 20rpx;
			.menu {
				padding: 0px 20px;
				height: 60px;
				display: flex;
				align-items: center;
				
				border-radius: 20rpx;
				background-color: #c4e6c2;
				.menu_title {
					flex: 1;
					color: #074f1e;
					font-size: 30rpx;
					font-weight: 600;
				}

				.icon_block {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
					.right_icon {
						width: 18rpx;
						height: 30rpx;
					}
				}
			}

		}

		.app_env {
			color: #999999;
			margin: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.my-anim {
			animation-duration: 2s;
			animation-delay: 0s;
			// 下面这个循环
			// animation-iteration-count: infinite;
		}
	}
</style>